<template>
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <h1 class="my-4">Todos 列表</h1>
            <!-- 修改按钮点击事件 -->
            <button class="btn btn-primary" @click="openAddModal">添加</button>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">标题</th>
                    <th scope="col">描述</th>
                    <th scope="col">完成状态</th>
                    <th scope="col">操作</th> <!-- 添加操作列 -->
                </tr>
            </thead>
            <tbody>
                <tr v-for="todo in currentPageTodos" :key="todo.id">
                    <td>{{ todo.id }}</td>
                    <td>{{ todo.title }}</td>
                    <td>{{ todo.description || '无描述' }}</td>
                    <td>
                        <input type="checkbox" :checked="todo.completed" disabled>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-warning" @click="openEditModal(todo)">修改</button>
                        <button class="btn btn-sm btn-danger" @click="deleteTodo(todo.id)">删除</button>
                    </td> <!-- 添加操作列内容 -->
                </tr>
            </tbody>
        </table>
        <!-- 模态对话框 -->
        <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">编辑待办事项</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label for="editTitle" class="form-label">标题</label>
                                <input type="text" class="form-control" id="editTitle" v-model="editedTodo.title">
                            </div>
                            <div class="mb-3">
                                <label for="editDescription" class="form-label">描述</label>
                                <textarea class="form-control" id="editDescription" v-model="editedTodo.description"></textarea>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editCompleted" v-model="editedTodo.completed">
                                <label class="form-check-label" for="editCompleted">
                                    完成状态
                                </label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="saveEditedTodo">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增模态对话框 -->
        <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">新增待办事项</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label for="addTitle" class="form-label">标题</label>
                                <input type="text" class="form-control" id="addTitle" v-model="newTodo.title">
                            </div>
                            <div class="mb-3">
                                <label for="addDescription" class="form-label">描述</label>
                                <textarea class="form-control" id="addDescription" v-model="newTodo.description"></textarea>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="addCompleted" v-model="newTodo.completed">
                                <label class="form-check-label" for="addCompleted">
                                    完成状态
                                </label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="saveNewTodo">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <nav aria-label="Todos 分页导航">
            <ul class="pagination justify-content-center">
                <li class="page-item" :class="{ disabled: currentPage === 1 }">
                    <a class="page-link" href="#" @click.prevent="prevPage">上一页</a>
                </li>
                <li class="page-item" :class="{ disabled: currentPage === 1 }">
                    <a class="page-link" href="#" @click.prevent="goToPage(1)">1</a>
                </li>
                <li v-if="currentPage > 3" class="page-item disabled">
                    <a class="page-link" href="#">...</a>
                </li>
                <li v-for="page in visiblePages" :key="page" class="page-item" :class="{ active: page === currentPage }">
                    <a class="page-link" href="#" @click.prevent="goToPage(page)">{{ page }}</a>
                </li>
                <li v-if="currentPage < totalPages - 2" class="page-item disabled">
                    <a class="page-link" href="#">...</a>
                </li>
                <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                    <a class="page-link" href="#" @click.prevent="goToPage(totalPages)">{{ totalPages }}</a>
                </li>
                <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                    <a class="page-link" href="#" @click.prevent="nextPage">下一页</a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

import * as bootstrap from 'bootstrap';


// 生成 100 条模拟数据
const todos = ref(Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    title: `任务 ${i + 1}`,
    description: `这是任务 ${i + 1} 的描述`,
    completed: Math.random() > 0.5
})));

// 每页显示的项目数量
const itemsPerPage = ref(5);
// 当前页码
const currentPage = ref(1);

// 计算总页数
const totalPages = computed(() => Math.ceil(todos.value.length / itemsPerPage.value));

// 计算当前页的待办事项
const currentPageTodos = computed(() => {
    const startIndex = (currentPage.value - 1) * itemsPerPage.value;
    const endIndex = startIndex + itemsPerPage.value;
    return todos.value.slice(startIndex, endIndex);
});

// 计算可见的页码
const visiblePages = computed(() => {
    let start = Math.max(currentPage.value - 2, 2);
    let end = Math.min(start + 4, totalPages.value - 1);
    if (end - start < 4) {
        start = Math.max(end - 4, 2);
    }
    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
});

// 上一页
const prevPage = () => {
    if (currentPage.value > 1) {
        currentPage.value--;
    }
};

// 下一页
const nextPage = () => {
    if (currentPage.value < totalPages.value) {
        currentPage.value++;
    }
};

// 跳转到指定页码
const goToPage = (page: number) => {
    currentPage.value = page;
};

// 添加待办事项的方法，这里只是示例，你可以根据需求完善
const addTodo = () => {
    console.log('点击了添加按钮');
};

// 用于存储当前要编辑的待办事项
const editedTodo = ref({ id: 0, title: '', description: '', completed: false });

// 打开编辑模态对话框
const openEditModal = (todo: any) => {
    editedTodo.value = { ...todo };
    const modal = new bootstrap.Modal(document.getElementById('editModal') as HTMLElement);
    modal.show();
};

// 保存编辑后的待办事项
const saveEditedTodo = () => {
    const index = todos.value.findIndex(todo => todo.id === editedTodo.value.id);
    if (index !== -1) {
        todos.value[index] = { ...editedTodo.value };
    }
    const modal = bootstrap.Modal.getInstance(document.getElementById('editModal') as HTMLElement);
    modal?.hide();
};

// 删除待办事项的方法，这里只是示例，你可以根据需求完善
const deleteTodo = (id: number) => {
    todos.value = todos.value.filter(todo => todo.id !== id);
    console.log(`点击了删除按钮，待办事项 ID 为 ${id}`);
};

// 新增待办事项数据
const newTodo = ref({ title: '', description: '', completed: false });

// 打开添加模态对话框
const openAddModal = () => {
    const modal = new bootstrap.Modal(document.getElementById('addModal') as HTMLElement);
    modal.show();
};

// 保存新增待办事项
const saveNewTodo = () => {
    const newId = todos.value.length > 0 ? todos.value[todos.value.length - 1].id + 1 : 1;
    const newTodoData = { ...newTodo.value, id: newId };
    todos.value.push(newTodoData);
    // 清空输入
    newTodo.value = { title: '', description: '', completed: false };
    const modal = bootstrap.Modal.getInstance(document.getElementById('addModal') as HTMLElement);
    modal?.hide();
};
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>